/**
 * 知识点：useState 和 useRef 区别
 *    1. React 团队设计的时候，这两个函数职责是不同的
 *    2. useState 定义用于UI更新的数据，更新是异步的
 *    3. useRef 定义没有直接用于UI更新的数据，修改是立刻生效的(如定时器id)
 */
import React, { useEffect, useRef, useState } from 'react'

export default function Test() {
  // 用于UI更新的数据用 useState 定义
  const [count, setCount] = useState(0)

  // 没有直接用于UI更新的数据用 useRef 定义
  const timerId = useRef(0)

  useEffect(() => {
    console.log('UI更新了，触发了useEffect')
  }, [timerId])

  const handleClick = () => {
    setCount(count + 1)
    console.log(count) // 0
  }

  const handleClick2 = () => {
    timerId.current = timerId.current + 1
    console.log('timerId.current', timerId.current) // 1
  }

  return (
    <div>
      <h1>useState 和 useRef</h1>
      <h2>state：{count}</h2>
      <h3>ref: {timerId.current}</h3>
      <button onClick={() => handleClick}>点击+1</button>
      <button onClick={() => handleClick2}>修改ref对象</button>
    </div>
  )
}

// 类组件同理
// class Test2 extends React.Component {
//   // 用于UI更新的数据定义到 state 结构中
//   state = {}
//   // 没有直接用于UI更新的数据直接写外面
//   timerId = 1
// }
